<template>
  <div class="about">
    <h1>This is an about page</h1>
    <my-button></my-button>
    <my-button>按钮1</my-button>
    <my-button>按钮2</my-button>
    <br /><br />
    <h2></h2>
    <my-button size="mini"></my-button>
    <my-button size="medium">按钮1</my-button>
    <my-button size="big">按钮2</my-button>
    <br /><br />
    <h2>动画 两个状态，通过hover来切换</h2>
    <!-- 默认动画：水平切换 -->
    <my-button animated>
      <div slot="hidden">$100,000</div>
      <div slot="visible">来呀！水平方向</div>
    </my-button>
    <br /><br />
    <!-- 垂直方向切换 -->
    <my-button size="massive" animated="vertical">
      <div slot="hidden">$100,000</div>
      <div slot="visible">来呀！垂直方向</div>
    </my-button>
    <br /><br />
    <!-- 缩放切换 -->
    <!--
      click只能对原生的dom有效
      不能直接写在组件上
      <van-button @click = "hclick">
        解决：
        方法1：在组件内部监听click，并抛出来
        下面的是；如果不想重子组件传值过来可以这样写
        方法2：在监听click加上.native

     -->
    <my-button animated="fade" size="mini" @click="hClik">
      <div slot="hidden">$100,000</div>
      <div slot="visible">来呀！</div>
    </my-button>
  </div>
</template>
<script>
export default {
  methods: {
    hClik () {
      alert('click')
    }
  }
}
</script>
